<template>
  <app-page card>
    <app-page-main>
      <template #header>
        <div class="app-query"></div>
        <div class="app-action">
          <el-button plain icon="plus" type="primary" @click="appHandleAdd()">添加</el-button>
        </div>
      </template>
      <el-table :data="appList" stripe style="width: 100%" @selection-change="appHandleSelectionChange">
        <el-table-column prop="configName" label="配置名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="configType" label="配置标识" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" icon="edit" @click="appHandleEdit(scope.row)">编辑</el-button>
            <el-button link type="primary" icon="delete" @click="appHandleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <el-pagination @size-change="appHandleSizeChange" @current-change="appHandlePageChange" :current-page="appPage" :page-size="appPageSize" layout="total, sizes, prev, pager, next, jumper" :total="appTotal"></el-pagination>
    </template>

    <!-- 弹窗新增/编辑内容 -->
    <app-dialog-edit width="500px" v-model="appShowDetail" :detail="appDetail" @change="appInit" :json="formJson">
      <template #config="{ label, name }">
        <el-form-item :label="label" v-if="appDetail.configId">
          <pre>{{ appDetail[name] }}</pre>
        </el-form-item>
        <span v-else></span>
      </template>
    </app-dialog-edit>
  </app-page>
</template>

<script>
import { mixins } from 'jax-node'

export default {
  mixins: [mixins.pageList],
  components: {},
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {},
  computed: {
    formJson() {
      const fixed = false
      const required = true

      return [
        { name: 'configName', label: '配置名称', required },
        { name: 'configType', label: '配置标识', required },
        { name: 'config', label: '详细配置' },
      ]
    },
  },
}
</script>

<style></style>
